<?php 
session_start();
ini_set("display_errors",1);
include_once '../config.php';
$usrID=intval($_SESSION['usrID']);
$channelID=intval($_GET['channelID']);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="../css/font-awesome.css" rel="stylesheet" type="text/css" />
<style>
	*{
	padding:0px;
	margin:0px;
	}
	body{
	position: relative;
      color: #333;
	font-family: tahoma, Arial, sans-serif;
	font-size: 13px;
		background:#fff;
		overflow:hidden;
		}
	i{
	color:#ccc;
}

i:hover{
	color:#999;
}
a{
	text-decoration: none;
	color:#333;
}

a:active {
    outline: none;
}
	
	
		section{
		position:relative;
		width:auto;
		height:450px;
		}
		
section > article{
	position: relative;
	width:auto;
	height:381px;
	overflow:hidden;
	overflow-y: scroll;
	}
	section > article  > div > table{
	width:450px;
	height:70px;
	table-layout:auto;
	border-spacing: 0px;
	border-collapse: collapse;
	margin:5px auto 0px auto;
	background: #fff;
	border-top:1px solid #ccc;
	}
	section > article  > div > table > tbody > tr > td{
	padding:5px;
	text-align: left;
	vertical-align: top;
	}
	section > article  > div > table > tbody > tr:first-child > td{
	height:15px;
	/* border:1px solid #ccc;	 */
	}
	section > article  > div > table > tbody > tr:first-child > td:last-child{
	width:50px;
	text-align: left;
	}
	
	section > article  > div > table > tbody > tr > td:first-child{
	width:35px;
	padding-top:12px;
	}
	section > article  > div > table > tbody > tr:last-child > td{
	word-wrap:break-word;
	}
	
	section table[class='send_wrap'] {
	width:450px;
	height:35px;
	border-spacing: 0px;
	border-collapse: collapse;
	padding:0px;
	margin:3px auto;
	}
	
	section table[class='send_wrap'] tr td{
	border:1px solid #ccc;
	}
	section table[class='send_wrap'] tr td:last-child {
	width:80px;
	height:35px;
	
	}
	section table[class='send_wrap'] textarea {
	width:370px;
	height:35px;
	max-width:380px;
	max-height:35px;
	border:none;
	overflow: hidden;
	}
	section table[class='send_wrap'] button {
	width:100%;
	height:100%;
	border:none;
	background:#f0f0f0;
	cursor: pointer;
	}
		
.clear{
clear:both;
}
</style>
<script type="text/javascript" src="../js/ds_a.js"></script>
<script type="text/javascript" src="../js/pi.js"></script>
<script type="text/javascript" src="../js/drag.js"></script>
<script type="text/javascript" src="../js/json.js"></script>
<script type="text/javascript">
function add(obj,usrID){
			var msg=obj['msg'].value;
			if(msg.isEmpty()) return false;
			bind("Me",msg,null);
			obj['msg'].value='';
			thread(['add.php?usrID='+usrID,'msg='+escape(msg)+'&channelID=<?=$channelID;?>'],function(){},function(e){},function(){});
}


function bind(name,msg,chatID){
	var gchatwrap=getObj('group_chat_body').getObjN("article")[0];
	var div=document.createElement("div");
	div.innerHTML=((name=="Me")?(''):("<input type='hidden' name='chatID' value='"+chatID+"'/>"))+"<table><tbody><tr><td rowspan='2'><i class='icon-user icon-2x icon-border'></i></td><td>"+name+"</td><td>time</td></tr><tr><td colspan='2' style='padding-top:2px'>"+msg+"</td></tr></tbody></table>";
	gchatwrap.appendChild(div);
	gchatwrap.scrollTop=gchatwrap.scrollHeight;
}


function fetch(){
	var chatIDs=getObj('group_chat_body').getObjN("article")[0].getFormData("hidden",function(o){ return o.name=='chatID';});
	thread(['fetch.php?channelID=<?=$channelID;?>','lastID='+chatIDs[chatIDs.length-1]],function(e){
		},function(e){
		var data=e.responseText.parseJSON();
		if(data.length > 0){
			 for(var i=0;i<data.length;i++){
				 	chatIDs=getObj('group_chat_body').getObjN("article")[0].getFormData("hidden",function(o){ return o.name=='chatID';});
					if(!chatIDs.in_array(parseInt(data[i]['chatID']))) bind(data[i]['name'],data[i]['msg'],data[i]['chatID']);
				}
		}
	},function(){});
}

addEvent(window,"load",function(){
	thread=ajaxThread();
	if (window.document.readyState=="complete"){
		var gchatwrap=getObj('group_chat_body').getObjN("article")[0];
		gchatwrap.scrollTop=gchatwrap.scrollHeight;
		setInterval(function(){fetch();},2000);
		}
}
	);
</script>
</head>
<body>
<section id="group_chat_body">
<article>
<?php
$i=0;
foreach($pdo->query("select g.chatID,g.msg,if(g.usrID=$usrID,'Me',concat(u.lname,' ',u.fname)) as name from (gchat g join usr u on u.usrID) where u.usrID=g.usrID and g.channelID=$channelID order by g.chatID asc" ) as $fetch){
?>
<div>
<?=($fetch['name']=="Me")?(NULL):("<input type='hidden' name='chatID' value='{$fetch['chatID']}'/>");?>
<table <?=($i++==0)?("style='border:none'"):(NULL);?>>
<tbody>
<tr><td rowspan="2"><i class="icon-user icon-2x icon-border"></i></td><td><?=$fetch['name'];?></td><td>time</td></tr>
<tr><td colspan="2" style="padding-top:2px"><?=$fetch['msg'];?></td></tr>
</tbody>
</table>
</div>
<?php 
}
?>
</article>
<hr/>
<form action="javascript:void(0)" method="post">
<table class="send_wrap">
<tr><td><textarea name="msg"></textarea></td><td><button name="send" onclick="add(this.form,<?=$usrID;?>)">Send</button></td></tr>
</table>
</form>
</section>
</body>
</html>
